<script lang="ts">
  export default {
    name: 'Register',
  };
</script>

<script setup lang="ts">
  import { ref, computed, reactive } from 'vue';
  import {
    showToast,
    showLoadingToast,
    closeToast,
    Form,
    Field,
    Button,
    CellGroup,
    Checkbox
  } from 'vant';
  import { useRouter } from 'vue-router';
  import { useWindowSize } from '@vueuse/core';
  import { useI18n } from 'vue-i18n';
  import API_HOME from '@/apis/home';
  const router = useRouter();
  const { width } = useWindowSize();
  const { t } = useI18n();
  // 表单数据
  let registerForm = reactive({
    username: '',
    email: '',
    password: '',

  })
  const agreeTerms = ref(false);
  // 显示密码和确认密码
  const showPassword = ref(false);
  const showConfirmPassword = ref(false);

  // 表单验证规则
  const nameRules = [
    { required: true, message: t('login.please') + t('login.Name') },
  ];
  const emailRules = [
    { required: true, message: t('login.please') + t('login.Email') },
    // { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入有效的邮箱地址' }
  ];

  const passwordRules = [
    { required: true, message: t('login.please') + t('login.Password') },
    // { min: 8, message: '密码长度至少为8位' },
    // { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/, message: '密码需包含大小写字母和数字' }
  ];

  const confirmPasswordRules = [
    { required: true, message: t('login.please') + t('login.ConfirmPassword') },
    {
      validator: (value: string) => value === password.value,
      message: t('login.twiceDoNotMatch')
    }
  ];

  // 注册处理
  const handleRegister = async () => {
    if (!agreeTerms.value) {
      showToast(t('login.PleaseReadAndAgreeToTheTermsOfService'));
      return;
    }
    showLoadingToast({
      message: 'Logind...',
      forbidClick: true,
      duration: 0
    });
    // 注册账号
    let res = await API_HOME.register(registerForm);
    if (res.code == 1) {
      closeToast();
      showToast({
        message: t('login.RegistrationSuccessful') + '！',
        type: 'success',
        onClose: () => {
          router.push('/login');
        }
      });
    }
    setTimeout(() => {
      registerForm.value = {
        username: '',
        email: '',
        password: '',
      }
    }, 500);
  };

  // 响应式判断
  const isMobile = computed(() => width.value < 768);

  // 跳转到登录页
  const goToLogin = () => {
    router.push('/login');
  };
</script>

<template>
  <div class="register-container">
    <!-- 头部区域 -->
    <div class="register-header">
      <h1 :class="['register-title', { 'mobile-title': isMobile }]">{{t('login.createAccount')}}</h1>
      <p class="register-subtitle">{{t('login.JoinUsAndStart')}}</p>
    </div>

    <!-- 表单区域 -->
    <van-form @submit="handleRegister" class="register-form">
      <van-cell-group inset>
        <!-- 姓名输入 -->
        <van-field v-model="registerForm.username" name="name" :label="t('login.Name')"
          :placeholder="t('login.please')+t('login.Name')" :rules="nameRules" clearable
          :size="isMobile ? 'small' : 'large'">
          <template #left-icon>
            <van-icon name="user-o" />
          </template>
        </van-field>

        <!-- 邮箱输入 -->
        <van-field v-model="registerForm.email" name="email" :label="t('login.Email')"
          :placeholder="t('login.please')+t('login.Email')" :rules="emailRules" type="email" clearable
          :size="isMobile ? 'small' : 'large'">
          <template #left-icon>
            <van-icon name="envelop-o" />
          </template>
        </van-field>

        <!-- 密码输入 -->
        <van-field v-model="registerForm.password" name="password" :label="t('login.Password')"
          :placeholder="t('login.please')+t('login.Password')" :rules="passwordRules"
          :type="showPassword ? 'text' : 'password'" clearable :size="isMobile ? 'small' : 'large'">
          <template #left-icon>
            <van-icon name="lock" />
          </template>
          <template #right-icon>
            <van-icon :name="showPassword ? 'eye-o' : 'closed-eye'" @click="showPassword = !showPassword"
              class="password-toggle" />
          </template>
        </van-field>

        <!-- 确认密码 -->
        <!-- <van-field v-model="confirmPassword" name="confirmPassword" :label="t('login.ConfirmPassword')" 
          :placeholder="t('login.please')+t('login.ConfirmPassword')" :rules="confirmPasswordRules"
          :type="showConfirmPassword ? 'text' : 'password'" clearable :size="isMobile ? 'small' : 'large'">
          <template #left-icon>
            <van-icon name="lock" />
          </template>
          <template #right-icon>
            <van-icon :name="showConfirmPassword ? 'eye-o' : 'closed-eye'"
              @click="showConfirmPassword = !showConfirmPassword" class="password-toggle" />
          </template>
        </van-field> -->
      </van-cell-group>

      <!-- 条款同意 -->
      <div class="terms-agreement">
        <van-checkbox v-model="agreeTerms" shape="square" icon-size="16px">
          {{t('login.IHaveReadAndAgree')}} <span class="terms-link">{{t('login.TermsOfService')}}</span> 和 <span
            class="terms-link">{{t('login.PrivacyPolicy')}}</span>
        </van-checkbox>
      </div>

      <!-- 注册按钮 -->
      <div class="register-button">
        <van-button square block color="#333333" native-type="submit" :size="isMobile ? 'normal' : 'large'"
          :disabled="!agreeTerms">
          {{t('login.RegisterNow')}}
        </van-button>
      </div>
    </van-form>



    <!-- 登录链接 -->
    <div class="login-link">
      {{t('login.haveAccount')}}?
      <span class="link" @click="goToLogin">{{t('login.LoginNow')}}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import url('./index.less');
</style>